<template>
  <!-- 新增、修改地址页面 -->
  <div class="add-container">
    <div class="tips">
      邮管局提示：即日起，快递单上禁止出现 *先生、*小姐等姓名，为防止您的快递无法正常寄送，请务必填写真实姓名。
    </div>
    <div class="from-input">
      <van-cell-group>
        <van-field
          :value="addressFrom.username"
          name="username"
          label="收件人："
          placeholder="姓名"
          :error-message="errorTips.username"
          @blur="inputSaveData('username', $event)"
        />
        <van-field
          :value="addressFrom.phone"
          name="phone"
          label="手机号："
          placeholder="请输入手机或电话号码"
          :error-message="errorTips.phone"
          @blur="inputSaveData('phone', $event)"
        />

        <van-field
          :value="addressFrom.cityname"
          name="cityname"
          readonly
          label="省/市/区县："
          icon="arrow"
          placeholder="请选择省/市/区"
          :error-message="errorTips.cityname"
          @click="clickCity"
        />

        <van-field
          :value="addressFrom.detailedAddress"
          name="detailedAddress"
          label="详细地址："
          type="textarea"
          placeholder="请输入详细地址（如街道、小区、乡镇、村）"
          autosize
          :error-message="errorTips.detailedAddress"
          @blur="inputSaveData('detailedAddress', $event)"
        />

      </van-cell-group>

      <!-- 底部确认保存地址按钮 -->
      <button class='address-wxUser-btn'
        @click.stop="getUserAddress"
      >
        微信一键添加
      </button>

    </div>

    <!-- 底部确认保存地址按钮 -->
    <button class='address-bottom-btn'
      @click.stop="saveAddress"
    >
      确定
    </button>


    <!-- 弹出选择省市区 -->
    <wux-popup position="bottom"
      :visible="cityShow"
      @close="closeCity"
    >
      <wux-cell-group>
        <!-- 默认选择中城市 -->
        <van-area :area-list="cityList" value="500000"
          @confirm="confirm"
          @cancel="closeCity"
          @change="change"
        />
      </wux-cell-group>
    </wux-popup>

  </div>
</template>

<script>
// import store from '@/utils/store' // 全局状态管理
import city from '@/utils/city' // 城市全数据
import {
  setStorage, getStorageSync, backPage
  // , bindViewTap
} from '@/utils/index' // 公用工具

export default {
  components: {
  },
  data () {
    return {
      toPageFlag: 'true', // 跳转页面模式(首页和其它页面用的是不同方式)
      title: '', // 页面标题
      cityList: city, // 所有城市数据
      cityShow: false, // 弹出城市选择控制
      backPage: '', // 确定按钮跳转页面控制
      addressFrom: {
        username: '', // 用户名
        phone: '', // 手机号
        cityname: '', // 用户选择的城市
        detailedAddress: '' // 详细街道地址
      },
      // 临时城市数据，用于处理的(设置默认数据)
      temporaryCity: [
        {name: '重庆市'},
        {name: '重庆市'},
        {name: '万州区'}
      ],
      // 验证信息错误提示
      errorTips: {
        username: '',
        phone: '',
        cityname: '',
        detailedAddress: ''
      }
    }
  },
  // 自定义函数
  methods: {
    // 底部确定按钮事件
    saveAddress () {
      // 异步处理验证
      setTimeout(() => {
        let flag = true // 跳转下一层控制
        let addressFrom = this.addressFrom
        let errorTips = this.errorTips
        let res = /(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}/ // 正则判断手机号
        let errTitle = {
          username: '收件人姓名不能为空',
          phone: '手机号或电话不能为空',
          phone2: '手机号或电话格式错误',
          cityname: '请选择城市',
          detailedAddress: '请填写收货地址信息'
        }
        for (let [key, value] of Object.entries(addressFrom)) {
          errorTips[key] = '' // 重置所有错误提示
          if (!value && errTitle[key]) {
            errorTips[key] = errTitle[key]
            flag = false
          }
          // 验证手机号
          if (key === 'phone' && !res.test(value)) {
            errorTips[key] = errTitle['phone2']
            flag = false
          }
        }
        this.errorTips = errorTips
        // 正常过验证后需要处理的事
        if (flag) {
          // 地址放入缓存中
          setStorage('addressFrom', this.addressFrom)
          backPage(1) // 回退页面-封装的
          // 跳转页面, 后面参数根据传入值，使用不用跳转模式
          // bindViewTap(`../${this.backPage}/main`, (this.toPageFlag === 'true'))
        }
      }, 20)
    },
    // 打开（选择城市）弹出层
    clickCity () {
      this.cityShow = true
    },
    // 关闭弹出层（取消按钮）
    closeCity () {
      this.cityShow = false
    },
    // 确认弹出层按钮事件
    confirm () {
      let data = this.temporaryCity
      let str = ''
      for (let i = 0; i < data.length; i++) {
        str += ' ' + data[i]['name']
      }
      this.addressFrom.cityname = str
      this.cityShow = false // 关闭弹出层
    },
    // 选择城市时触发处理
    change (picker) {
      // 获取当前用户选择的数据，是数组
      this.temporaryCity = picker.target.values
    },
    // 输入input存数据
    inputSaveData (name, e) {
      this.addressFrom[name] = e.target.value
    },
    // 微信一键添加地址
    getUserAddress () {
      let that = this
      // 获取用户微信地址信息
      wx.chooseAddress({
        success (res) {
          // console.log(res)
          that.addressFrom = {
            username: res.userName, // 用户名
            phone: res.telNumber, // 手机号
            cityname: `${res.cityName} ${res.provinceName} ${res.countyName}`, // 用户选择的城市
            detailedAddress: res.detailInfo // 详细街道地址
          }
        }
      })
    }

  },
  // 在实例创建完成后被立即调用
  mounted () {
    try {
      let title = '' // 页面标题，动态改变
      let backPage = this.$mp.query.backPage || 'index'
      // 直接进入此页面的，跳转去首页
      // if (!backPage) {
      //   bindViewTap('../index/main')
      // }
      // 读取缓存中的地址，没有缓存就为空
      let data = getStorageSync('addressFrom')
      if (!data) {
        title = '添加地址'
      } else {
        title = '修改地址'
        this.addressFrom = data
      }
      // 更改页面标题
      wx.setNavigationBarTitle({
        title: title
      })
      // 存放跳转页面传递过来的参数数据
      this.backPage = backPage
      this.toPageFlag = this.$mp.query.flag || 'false' // 页面跳转默认使用--首页模式
      console.log('进来的flag:', this.$mp.query)
    } catch (e) {
      console.log(e)
    }
  }
}
</script>

<style>
page {
  background: #fff;
}
.add-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  /* align-items: center; */
  font-size: 28rpx;
  color:#333;
}
/* 顶部提示信息 */
.tips {
  flex: 1;
  padding: 15rpx 20rpx;
  font-size: 24rpx;
  color: #FFF4D4;
  background: #FF3D6B;
}
/* 整体input外层 */
.from-input {
  margin-top: 20rpx;
}
/* 详细地址改动wux框架样式 */
.wux-textarea__label {
  max-width: 90PX;
  min-width: 90PX;
  margin-right: 0 !important;
}
/* 微信获取地址按钮 */
.address-wxUser-btn {
  margin-top: 50rpx;
  width: 50%;
  color: #FFF4D4;
  background: #46CB61;
}
/* 底部确定 */
.address-bottom-btn{
  position: fixed;
  width: 100%;
  height: 82rpx;
  line-height: 82rpx;
  bottom:0;
  font-size: 36rpx;
  border-radius: 0;
  background: #E9CF85;
  color: #000;
}
</style>
